<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane label="商户白名单列表" name="first">
          <el-row>
            <el-form
              :model="numberValidateForm"
              ref="numberValidateForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-col :span="10" style="padding: 0; height: 60px;">
                <el-form-item label="状态:" prop="region">
                  <el-select v-model="numberValidateForm.region" placeholder="全部" clearable>
                    <el-option label="禁用" value="2"></el-option>
                    <el-option label="启用" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="padding: 0; height: 60px;">
                <el-form-item>
                  <el-button @click="search" type="primary" style="width: 80px">
                    <i class="el-icon-search"></i>查询
                  </el-button>
                  <!-- <el-button @click="test" type="primary" style="width: 80px">
                    <i class="el-icon-search"></i>查询
                  </el-button> -->
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center"></el-table-column>
              <el-table-column prop="merchantId" label="商户ID" align="center" width="230"></el-table-column>
              <el-table-column prop="ipAddress" label="IP" align="center" width="260"></el-table-column>
              <el-table-column prop="status" align="center" label="状态" width="230">
                  <template slot-scope="scope">
                      {{getWhiteStatus(scope.row.status)}}
                  </template> 
              </el-table-column>
              <el-table-column label="操作" align="center" width="190">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
                  <el-button @click="remove(scope.row)" type="primary" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageIndexChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            ></el-pagination>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="添加" name="second">
          <div style="width:60%;margin: 20px auto;">
            <el-form :label-position="labelPosition" label-width="80px" :rules="ruleformLabelAlign" :model="formLabelAlign" ref="formLabelAlign">
              <el-form-item label="商户ID:" prop="name">
                <el-input v-model="formLabelAlign.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="IP:" prop="region">
                <el-input v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="状态:" prop="status">
                <el-select v-model="formLabelAlign.status" placeholder="启用" clearable>
                  <el-option label="禁用" value="2"></el-option>
                  <el-option label="启用" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('formLabelAlign')" :loading="resetLoadadd">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商户ID:" label-width="120px" style="display:none;">
            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="IP:" label-width="120px">
            <el-input v-model="form.ip" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态:" label-width="120px">
            <el-select v-model="form.region" placeholder="启用" clearable>
              <el-option label="禁用" value="2"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="resetUserWhiteListSubmit" :loading="resetLoad">确 定</el-button>
        </div>
    </el-dialog>
     <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商户ID:" label-width="120px">
            <el-input v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="IP:" label-width="120px">
            <el-input v-model="form.ip" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态:" label-width="120px">
            <el-select v-model="form.region" placeholder="启用" clearable>
              <el-option label="禁用" value="2"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="resetUserWhiteListSubmit" :loading="resetLoad">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="确定删除该用户？" :visible.sync="dialogFormVisibleRe">
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleRe = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="removeuser" :loading="resetLoadRe">确 定</el-button>
        </div>
      </el-dialog>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>
import enums from '../../common/Enum'
import DataUtil from "../../common/dataUtil";
import { getUserWhiteList ,resetUserWhiteList ,addUserWhiteList ,removeUserWhiteList ,UnderwriterPayCollect} from "@/api/index.js";
export default {
  inject: ['reload'],
  data() {
    return {
      resetLoad : false,
      resetLoadRe :  false,
      resetLoadadd : false,
      gridLoading: false,
      dialogFormVisible : false,
      dialogFormVisibleRe : false,
      activeName: "first",
      pageIndex: this.$store.getters.getOrderListAllIndex,
      pageSize: 10,
      dataTotal: 0,
      labelPosition: "right",
      formLabelAlign: {
        name: JSON.parse(DataUtil.userInfo()).id,
        status : '',
        region: ""
      },
      ruleformLabelAlign : {
        name: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        region: [{ required: true, message: "请输入IP", trigger: "blur" }]
      },
      numberValidateForm: {
        region: ""
      },
      tableData: [],
      form: {
          name: '',
          region: '',
          ip: '',
      },
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('setOrderListAllIndex', val)
				this.search();
    },
    pageSizeChange(val) {
    },
      /////切换tabs
    tabChange(e) {
      if (e.index == "0") {
        this.bindGrid();
      }
    },
    getWhiteStatus(type){
      return enums.getwhiteStatus(type);
    },
    ///////////查询
    search() {
      this.bindGrid();
    },
    test(){
      const formData = new FormData();
      UnderwriterPayCollect(formData).then(response => {

      }, response => {

      });
    },
    ////////白名单列表
    bindGrid() {
      this.gridLoading = true;
      const formData = new FormData();
      formData.append('merchantId',JSON.parse(DataUtil.userInfo()).id);
      formData.append('status',this.numberValidateForm.region);
      getUserWhiteList(formData).then(response => {
        if ('01001' == response.status) {
          this.gridLoading = false;
          if(response.data){
            this.tableData = response.data.dataList;
            this.dataTotal = response.data.page.recordCount;
            // formData.delete("merchantId");
            // formData.delete("status");
          }else {
            this.gridData = [];
            this.dataTotal = 0;
          }
        } else {
            // formData.delete("merchantId");
            // formData.delete("status");
          this.$message.error(response.msg);
        }
      }, response => {
        this.gridLoading = false;
      });
    },
    /////////点击修改
    handleClick(row){
      this.dialogFormVisible = true;
      this.form.name =  row.id;
      this.form.ip = row.ipAddress;
    },
    /////////提交修改
    resetUserWhiteListSubmit(){
      this.resetLoad = true;
      if(this.form.region){
        const formData = new FormData();
          formData.append('id',this.form.name);
          formData.append('ipAddress',this.form.ip);
          formData.append('status',this.form.region);
          resetUserWhiteList(formData).then(response => {
            if ('01001' == response.status) {
              this.gridLoading = false;
                this.resetLoad = false;
                this.dialogFormVisible = false;
                // formData.delete("id");
                // formData.delete("ipAddress");
                // formData.delete("status");
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
                this.bindGrid();
            } else {
              // formData.delete("id");
              // formData.delete("ipAddress");
              // formData.delete("status");
              this.$message.error(response.msg);
              this.resetLoad = false;
            }
          }, response => {
            
          });
      }else{
          this.resetLoad = false;
          this.$message.error("状态不能为空！");
      }
    },
    //////////添加
    submitForm(formName){
      this.resetLoadadd = true;
      this.$refs[formName].validate(valide => {
        //只有校验通过之后才执行函数
          if (valide) {
            const formData = new FormData();
            formData.append('merchantId',this.formLabelAlign.name);
            formData.append('ipAddress',this.formLabelAlign.region);
            formData.append('status',this.formLabelAlign.status);
            addUserWhiteList(formData).then(response => {
              if ('01001' == response.status) {
                  this.resetLoadadd = false;
                  // formData.delete('merchantId');
                  // formData.delete('ipAddress');
                  // formData.delete('status');
                  this.$message({
                      message: '修改成功！',
                      type: 'success'
                  });
                  this.$refs[formName].resetFields();
                  this.reload();
                  this.$router.replace({path: '/userWhiteList',query: {}})
              } else {
                // formData.delete('merchantId');
                // formData.delete('ipAddress');
                // formData.delete('status');
                this.$refs[formName].resetFields();
                this.$message.error(response.msg);
                this.resetLoadadd = false;
              }
            }, response => {
              
            });
        }else{
            this.resetLoadadd = false;
            this.$message.error("输入不能为空！");
        }
      })
    },
    /////////删除
    remove(row){
      this.dialogFormVisibleRe = true;
      this.form.name =  row.id;
    },
    ///////删除白名单用户
    removeuser(){
      const formData = new FormData();
        formData.append('id',this.form.name);
        removeUserWhiteList(formData).then(response => {
          if ('01001' == response.status) {
              this.resetLoadRe = false;
              this.dialogFormVisibleRe = false;
              // formData.delete("id");
              this.$message({
                  message: '删除成功！',
                  type: 'success'
              });
              this.bindGrid();
          } else {
            // formData.delete("id");
            this.$message.error(response.msg);
            this.resetLoadRe = false;
          }
        }, response => {
          
        });
    },
  },
  mounted: function() {
    this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
